<template>
  <div class="rightBox">
    <div class="span">{{ $t('page3.ongoing_work_orders') }}</div>
    <div
      class="box"
      @mouseenter="isAutoRoll = false"
      @mouseleave="isAutoRoll = true"
    >
      <div class="contentText1">
        <div
          v-for="(item, index) in listData"
          :key="index"
          class="contentText"
          :style="{ transform: `translateY(${tableTop}px)` }"
        >
          <div class="topText">
            <span
              >{{ $t('page3.rightBox.materialCode') }}：<span class="text">
                {{ item.workOrderMaterialNo }}</span
              ></span
            >
          </div>
          <div class="row">
            <div class="col">
              <span
                >{{ $t('page3.rightBox.workOrderCode') }}：<span class="text">
                  {{ item.workOrderCode }}</span
                ></span
              >
              <span
                >{{ $t('page3.rightBox.workOrderQuantity') }}：<span class="text">
                  {{ item.workOrderNum }}</span
                ></span
              >
            </div>
            <div class="col" v-if="item.equipmentNum === 1">
              <span
                >{{ $t('page3.rightBox.equipmentQuantity') }}：<span class="text">
                  {{ item.equipmentNum }}</span
                ></span
              >
              <span
                >{{$t('page3.rightBox.completionQuantity')}}：<span class="text">
                  {{
                    item.workOrderCompleteNum2 > item.workOrderNum
                      ? item.workOrderNum
                      : item.workOrderCompleteNum2
                  }}</span
                ></span
              >
            </div>
            <div class="col" v-else>
              <span
                >{{ $t('page3.rightBox.equipmentQuantity') }}：<span class="text">
                  {{ item.equipmentNum }}</span
                ></span
              >
              <span
                >{{$t('page3.rightBox.completionQuantity')}}：<span class="text">
                  {{
                    item.workOrderCompleteNum > item.workOrderNum
                      ? item.workOrderNum
                      : item.workOrderCompleteNum
                  }}</span
                ></span
              >
            </div>
          </div>
          <div
            class="topText"
            v-if="item.equipmentNum === 1"
            style="color: #d9b95b"
          >
          {{ $t('page3.rightBox.completionRate') }}：<el-progress
              :show-text="false"
              :percentage="
                parseFloat(
                  (
                    (item.workOrderCompleteNum2 / item.workOrderNum) * 100 ||
                    0.0
                  ).toFixed(2)
                ) >= 100
                  ? 100
                  : parseFloat(
                      (
                        (item.workOrderCompleteNum2 / item.workOrderNum) *
                          100 || 0.0
                      ).toFixed(2)
                    )
              "
              :stroke-width="18"
              :color="customColor1"
              :define-back-color="customColor2"
              :text-color="customColor1"
            ></el-progress>
            <span
              >{{
                (
                  (item.workOrderCompleteNum2 / item.workOrderNum) * 100 || 0.0
                ).toFixed(2)
              }}%</span
            >
          </div>
          <div class="topText" v-else style="color: #d9b95b">
            {{ $t('page3.rightBox.completionRate') }}：<el-progress
              :show-text="false"
              :percentage="
                parseFloat(
                  (
                    (item.workOrderCompleteNum / item.workOrderNum) * 100 || 0.0
                  ).toFixed(2)
                ) >= 100
                  ? 100
                  : parseFloat(
                      (
                        (item.workOrderCompleteNum / item.workOrderNum) * 100 ||
                        0.0
                      ).toFixed(2)
                    )
              "
              :stroke-width="18"
              :color="customColor1"
              :define-back-color="customColor2"
              :text-color="customColor1"
            ></el-progress>
            <span
              >{{
                (
                  (item.workOrderCompleteNum / item.workOrderNum) * 100 || 0.0
                ).toFixed(2)
              }}%</span
            >
          </div>
        </div>
        <div
          v-for="item in listData"
          :key="item.workOrderId"
          v-show="isAutoRoll"
          class="contentText"
          :style="{ transform: `translateY(${tableTop}px)` }"
        >
          <div class="topText">
            <span
              >{{ $t('page3.rightBox.materialCode') }}：<span class="text">
                {{ item.workOrderMaterialNo }}</span
              ></span
            >
          </div>
          <div class="row">
            <div class="col">
              <span
                >{{ $t('page3.rightBox.workOrderCode') }}：<span class="text">
                  {{ item.workOrderCode }}</span
                ></span
              >
              <span
                >{{ $t('page3.rightBox.workOrderQuantity') }}：<span class="text">
                  {{ item.workOrderNum }}</span
                ></span
              >
            </div>
            <div class="col" v-if="item.equipmentNum === 1">
              <span
                >{{ $t('page3.rightBox.equipmentQuantity')}}：<span class="text">
                  {{ item.equipmentNum }}</span
                ></span
              >
              <span
                >{{ $t('page3.rightBox.completionQuantity')}}：<span class="text">
                  {{
                    item.workOrderCompleteNum2 > item.workOrderNum
                      ? item.workOrderNum
                      : item.workOrderCompleteNum2
                  }}</span
                ></span
              >
            </div>
            <div class="col" v-else>
              <span
                >{{ $t('page3.rightBox.equipmentQuantity')}}：<span class="text">
                  {{ item.equipmentNum }}</span
                ></span
              >
              <span
                >{{ $t('page3.rightBox.completionQuantity')}}：<span class="text">
                  {{
                    item.workOrderCompleteNum > item.workOrderNum
                      ? item.workOrderNum
                      : item.workOrderCompleteNum
                  }}</span
                ></span
              >
            </div>
          </div>
          <div
            class="topText"
            v-if="item.equipmentNum === 1"
            style="color: #d9b95b"
          >
          {{ $t('page3.rightBox.completionRate') }}：<el-progress
              :show-text="false"
              :percentage="
                parseFloat(
                  (
                    (item.workOrderCompleteNum2 / item.workOrderNum) * 100 ||
                    0.0
                  ).toFixed(2)
                ) >= 100
                  ? 100
                  : parseFloat(
                      (
                        (item.workOrderCompleteNum2 / item.workOrderNum) *
                          100 || 0.0
                      ).toFixed(2)
                    )
              "
              :stroke-width="18"
              :color="customColor1"
              :define-back-color="customColor2"
              :text-color="customColor1"
            ></el-progress>
            <span
              >{{
                (
                  (item.workOrderCompleteNum2 / item.workOrderNum) * 100 || 0.0
                ).toFixed(2)
              }}%</span
            >
          </div>
          <div class="topText" v-else style="color: #d9b95b">
            {{ $t('page3.rightBox.completionRate') }}：<el-progress
              :show-text="false"
              :percentage="
                parseFloat(
                  (
                    (item.workOrderCompleteNum / item.workOrderNum) * 100 || 0.0
                  ).toFixed(2)
                ) >= 100
                  ? 100
                  : parseFloat(
                      (
                        (item.workOrderCompleteNum / item.workOrderNum) * 100 ||
                        0.0
                      ).toFixed(2)
                    )
              "
              :stroke-width="18"
              :color="customColor1"
              :define-back-color="customColor2"
              :text-color="customColor1"
            ></el-progress>
            <span
              >{{
                (
                  (item.workOrderCompleteNum / item.workOrderNum) * 100 || 0.0
                ).toFixed(2)
              }}%</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { WorkorderListing } from "@/api/index";
export default {
  data() {
    return {
      customColor: "#009dff",
      customColor2: "#826F36",
      customColor1: "#C9AC55",
      listData: [],
      tableTimer: null,
      isAutoRoll: false, // 是否开启滚动
      tableTop: 0, // 滚动的像素
      listSize: 2, //容器内可视最大完整行数
      ListTimerInterval: 60, //向上滚动 1px 所需要的时间，越小越快
    };
  },

  computed: {
    // 根据不同分辨率动态获取滚动元素item的高度（包含margin-top/bottom,border等）
  },
  watch: {
    // 侦听数据的改变，是否判断要进行滚动
    listData: {
      handler(newValue, oldValue) {
        if (newValue.length > this.listSize && !this.isAutoRoll) {
          this.isAutoRoll = true;
        }
        if (newValue.length <= this.listSize) {
          this.isAutoRoll = false;
        }
      },
      deep: true,
      immediate: true,
    },
    isAutoRoll: {
      handler(newValue) {
        if (newValue) {
          this.tableTimerFun();
        } else {
          // this.tableTop = 0;
          clearInterval(this.tableTimer);
        }
      },
      immediate: true,
    },
  },
  beforeDestroy() {
    this.tableTop = 0;
    this.isAutoRoll = false;
    clearInterval(this.tableTimer);
  },
  methods: {
    // 无缝滚动效果的实现
    tableTimerFun() {
      let count = 0;
      this.tableTimer = setInterval(() => {
        if (count < this.listData.length * 130 + this.listData.length * 15) {
          this.tableTop -= 1;
          count++;
        } else {
          count = 0;
          this.tableTop = 0;
        }
      }, this.ListTimerInterval);
    },
    getrequests() {
      this.listData = [];
      WorkorderListing().then((res) => {
        if (res.code == 200) {
          this.tableTop = 0;
          this.loading = false;
          this.isAutoRoll = true;
          this.listData = res.data;
          this.listData.map((item) => {
            item.workOrderCompleteNum = parseInt(
              (item.workOrderNum *
                (Math.floor(Math.random() * (70 - 80 + 1)) + 80)) /
                100 +
                item.workOrderNum / 200
            );
            item["workOrderCompleteNum2"] = parseInt(
              (item.workOrderNum *
                (Math.floor(Math.random() * (48 - 56 + 1)) + 56)) /
                100 +
                item.workOrderNum / 200
            );
            return item;
          });
          //   this.listData.map((item) => {
          //   return item.workOrderCompleteNum
          // });
        }
      });
    },
  },
  mounted() {
    setInterval(() => {
      this.getrequests();
    }, 1800000);
    this.getrequests();
  },
};
</script>

<style lang="scss" scoped>
.span {
  font-size: 16px;
  text-align: center;
  line-height: 10px;
  font-weight: 700;
}
.rightBox {
  width: 465px;
  height: 43.5vh;
  margin-top: 2px;
  background: url("~@/assets/img/right3.png") no-repeat;
  background-size: 100% 100%;

  .box {
    width: 100%;
    height: 94%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    .topText {
      color: #7fb7ed;
      font-size: 15px;
      width: 100%;
      display: flex;
      .el-progress {
        width: 71%;
        color: #7fb7ed;
      }
    }
    .contentText1 {
      width: 435px;
      height: 100%; /* 根据项目数量调整 */
      transition: transform 3s ease; /* 平滑滚动效果 */
    }
    .contentText:nth-child(1)::after {
      content: "";
      border: 1px solid #7fb7ed;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      box-shadow: #7fb7ed 0 0 8px;
      margin: -120px 0 0 410px;
      position: absolute;
    }
    .contentText {
      padding: 5px 10px;
      width: 435px;
      // margin-left: 2px;
      height: 130px;
      color: #102437;
      box-shadow: #2e4b66 1px 1px 8px 1px;
      margin-top: 15px;
      border-radius: 6px;
      .row {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .col {
          height: 65px;
          margin: 6px 0;
          color: #7fb7ed;
          text-align: left;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }
        .col:nth-child(1) {
          width: 50%;
        }
        .col:nth-child(2) {
          width: 50%;
        }
        span {
          font-size: 14px;
          line-height: 14px;
        }
      }
      .text {
        color: #009dff;
      }
    }
  }
}
::v-deep .el-progress__text {
  width: 30px !important;
  font-size: 15px !important;
}
</style>
